<!DOCTYPE html>
<html>

<head>
    <title>注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(45deg, #00416A, #E4E5E6);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .register-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            padding: 40px;
            width: 100%;
            max-width: 600px;
            min-width: 300px;
        }

        .register-container h2 {
            text-align: center;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .form-label {
            font-weight: 600;
        }

        .form-control {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .form-text {
            color: rgba(255, 255, 255, 0.7);
        }

        .btn {
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
        }

        .btn-primary {
            background: #00416A;
            border: none;
        }

        .btn-primary:hover {
            background: #002b47;
        }

        .btn-success {
            background: #228B22;
            border: none;
        }

        .btn-success:hover {
            background: #1a691a;
        }

        .text-center a {
            color: white;
            text-decoration: underline;
        }

        .text-center a:hover {
            color: #E4E5E6;
        }

        .alert {
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
        }
        
        .alert-danger {
            background: rgba(255, 0, 0, 0.2);
        }
        
        .alert-success {
            background: rgba(0, 255, 0, 0.2);
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group .form-control {
            margin-bottom: 0;
        }

        .input-group .btn {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            color: white;
            padding: 12px 16px;
            border-radius: 0 10px 10px 0;
        }

        .input-group .btn:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        .step-indicator {
            text-align: center;
            margin-bottom: 20px;
        }

        .step {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            line-height: 30px;
            margin: 0 10px;
            font-weight: 600;
        }

        .step.active {
            background: #00416A;
        }

        .step.completed {
            background: #228B22;
        }
    </style>
</head>

<body>
    <div class="register-container">
        <h2 class="text-center mb-4">用户注册</h2>
        
        <!-- 步骤指示器 -->
        <div class="step-indicator">
            <span class="step active" id="step1-indicator">1</span>
            <span class="step" id="step2-indicator">2</span>
        </div>
        
        <form id="registerForm">
            <!-- 第一步：填写基本信息 -->
            <div id="step1">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" required 
                           placeholder="请输入3-20个字符的用户名">
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">邮箱</label>
                    <div class="input-group">
                        <input type="email" class="form-control" id="email" name="email" required 
                               placeholder="请输入您的邮箱" style="border-radius: 10px 0 0 10px;">
                        <button type="button" class="btn" id="sendCodeBtn">
                            <span id="sendBtnText">发送验证码</span>
                            <span id="countdown" style="display:none;"></span>
                        </button>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" required 
                           placeholder="请输入至少8个字符的密码">
                </div>
                <div class="mb-3">
                    <label for="confirm_password" class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" required 
                           placeholder="请再次输入密码">
                </div>
            </div>

            <!-- 第二步：邮箱验证 -->
            <div id="step2" style="display: none;">
                <div class="mb-3">
                    <label for="code" class="form-label">验证码</label>
                    <input type="text" class="form-control" id="code" name="code" required 
                           placeholder="请输入6位验证码">
                    <div class="form-text">验证码10分钟内有效</div>
                </div>
                <input type="hidden" name="action" value="verify_and_register">
                <div class="d-grid">
                    <button type="submit" class="btn btn-success">完成注册</button>
                </div>
                <div class="mt-3 text-center">
                    <button type="button" class="btn btn-link text-white" id="backBtn">返回上一步</button>
                </div>
            </div>

            <!-- 第一步的下一步按钮 -->
            <div id="step1-buttons">
                <div class="d-grid">
                    <button type="button" class="btn btn-primary" id="nextStepBtn">下一步</button>
                </div>
            </div>

            <div class="mt-3 text-center">
                <a href="/login">已有账号？立即登录</a>
            </div>
        </form>
        <div id="message" class="mt-3"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            let emailVerified = false;
            
            // 倒计时功能
            function startCountdown(seconds) {
                $('#sendBtnText').hide();
                $('#countdown').show().text(`重新发送(${seconds}s)`);
                $('#sendCodeBtn').prop('disabled', true);
                
                let count = seconds;
                const timer = setInterval(() => {
                    count--;
                    $('#countdown').text(`重新发送(${count}s)`);
                    
                    if (count <= 0) {
                        clearInterval(timer);
                        $('#countdown').hide();
                        $('#sendBtnText').show();
                        $('#sendCodeBtn').prop('disabled', false);
                    }
                }, 1000);
            }

            // 发送验证码
            $('#sendCodeBtn').click(function () {
                const email = $('#email').val().trim();
                if (!email) {
                    $('#message').html('<div class="alert alert-danger">请输入邮箱地址</div>');
                    return;
                }
                
                const btn = $(this);
                btn.prop('disabled', true);
                btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 发送中...');
                
                $.ajax({
                    type: 'POST',
                    url: '/register',
                    data: { action: 'send_code', email: email },
                    success: function (response) {
                        if (response.success) {
                            $('#message').html('<div class="alert alert-success">' + response.message + '</div>');
                            startCountdown(60);
                        } else {
                            $('#message').html('<div class="alert alert-danger">' + response.message + '</div>');
                        }
                        btn.prop('disabled', false);
                        btn.html('<span id="sendBtnText">发送验证码</span><span id="countdown" style="display:none;"></span>');
                    },
                    error: function() {
                        btn.prop('disabled', false);
                        btn.html('<span id="sendBtnText">发送验证码</span><span id="countdown" style="display:none;"></span>');
                        $('#message').html('<div class="alert alert-success">请求失败，请重试</div>');
                    }
                });
            });

            // 下一步按钮
            $('#nextStepBtn').click(function() {
                // 验证表单
                const username = $('#username').val().trim();
                const email = $('#email').val().trim();
                const password = $('#password').val();
                const confirmPassword = $('#confirm_password').val();
                
                if (!username || username.length < 3 || username.length > 20) {
                    $('#message').html('<div class="alert alert-danger">用户名长度必须在3-20个字符之间</div>');
                    return;
                }
                
                if (!email) {
                    $('#message').html('<div class="alert alert-danger">请输入邮箱地址</div>');
                    return;
                }
                
                if (!password || password.length < 8) {
                    $('#message').html('<div class="alert alert-danger">密码长度至少8个字符</div>');
                    return;
                }
                
                if (password !== confirmPassword) {
                    $('#message').html('<div class="alert alert-danger">两次输入的密码不一致</div>');
                    return;
                }
                
                // 切换到第二步
                $('#step1').hide();
                $('#step1-buttons').hide();
                $('#step2').show();
                $('#step1-indicator').removeClass('active').addClass('completed');
                $('#step2-indicator').addClass('active');
                $('#message').html('');
            });

            // 返回上一步
            $('#backBtn').click(function() {
                $('#step2').hide();
                $('#step1').show();
                $('#step1-buttons').show();
                $('#step1-indicator').removeClass('completed').addClass('active');
                $('#step2-indicator').removeClass('active');
                $('#message').html('');
            });

            // 提交注册表单
            $('#registerForm').submit(function (e) {
                e.preventDefault();
                
                const submitBtn = $('button[type="submit"]', this);
                const originalText = submitBtn.html();
                submitBtn.prop('disabled', true);
                submitBtn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 注册中...');
                
                // 获取并验证所有字段
                const username = $('#username').val().trim();
                const email = $('#email').val().trim();
                const password = $('#password').val();
                const code = $('#code').val().trim();
                
                // 前端再次验证
                if (!username || !email || !password || !code) {
                    $('#message').html('<div class="alert alert-danger">请填写所有必需字段</div>');
                    submitBtn.prop('disabled', false);
                    submitBtn.html(originalText);
                    return;
                }
                
                // 添加所有字段到表单数据
                const formData = {
                    action: 'verify_and_register',
                    username: username,
                    email: email,
                    password: password,
                    code: code
                };
                
                // 调试：打印发送的数据
                console.log('发送的注册数据:', formData);
                
                $.ajax({
                    type: 'POST',
                    url: '/register',
                    data: formData,
                    success: function (response) {
                        console.log('服务器响应:', response);
                        if (response.success) {
                            $('#message').html('<div class="alert alert-success">' + response.message + ' 即将跳转到登录页面...</div>');
                            setTimeout(() => window.location.href = '/login', 2000);
                        } else {
                            $('#message').html('<div class="alert alert-danger">' + response.message + '</div>');
                        }
                        submitBtn.prop('disabled', false);
                        submitBtn.html(originalText);
                    },
                    error: function(xhr, status, error) {
                        console.error('请求错误:', xhr, status, error);
                        submitBtn.prop('disabled', false);
                        submitBtn.html(originalText);
                        $('#message').html('<div class="alert alert-danger">注册请求失败，请重试</div>');
                    }
                });
            });

            // 密码确认验证
            $('#confirm_password').on('input', function() {
                const password = $('#password').val();
                const confirmPassword = $(this).val();
                
                if (confirmPassword && password !== confirmPassword) {
                    $(this).css('border', '1px solid #dc3545');
                } else {
                    $(this).css('border', 'none');
                }
            });
        });
    </script>
</body>

</html>